<script setup>
import { ref, defineProps } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
	scoreVisible: Boolean
})
const emits = defineEmits(['changeScoreVisible'])
const scoreForm = ref({
	type: '增加',
	num: 1,
	content: ''
})
const isShow = ref(false)
</script>
<template>
	<el-dialog v-model="props.scoreVisible" width="520px" @close="emits('changeScoreVisible', false)">
		<template #header>
			<h2 class="dialog-title">修改评分</h2>
		</template>
		<div class="score-box">
			<span style="margin-right: 8px">将给客户修改评分，此次</span
			><el-select style="width: 80px; height: 34px; margin-right: 8px" v-model="scoreForm.type" placeholder="Select">
				<el-option value="增加">增加</el-option>
				<el-option value="减少">减少</el-option>
			</el-select>
			<el-input style="width: 116px" v-model="scoreForm.num" placeholder="分数">
				<template #append>分</template>
			</el-input>
		</div>
		<el-input
			style="margin-top: 16px"
			v-model="scoreForm.content"
			maxlength="50"
			placeholder="请输入修改评分备注"
			show-word-limit
			type="textarea"
			:autosize="{
				minRows: 5
			}"
			resize="none"
		/>
		<div class="scroe-history">
			<a @click="isShow = !isShow">{{ isShow ? '收起' : '查看评分修改记录' }} </a>
		</div>
		<div class="history-content" v-show="isShow">
			<el-scrollbar max-height="420px">
				<header>历史修改评分记录:</header>
				<div class="history">
					<div class="time-box">
						<el-icon style="margin-right: 5px"><Clock /></el-icon>
						<div>2022-10-29 21:28</div>
					</div>
					<div class="detail-box">
						<img src="https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png" />
						<div class="score-detail">
							<div class="score-box">
								<span style="margin: 0"><span> 代树兴</span></span>
								<div>
									<div>给Ta减少了评分, 评分<em>-1</em></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button class="mergr-btn" @click="emits('changeScoreVisible', false)">取消</el-button>
				<el-button class="mergr-btn" type="primary" @click="emits('changeScoreVisible', false)"> 保存 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
:deep(.el-textarea__inner) {
	background-color: #fafafa;
}
.mergr-btn {
	width: 74px;
	height: 32px;
	border-radius: 2px;
}
.score-box {
	display: flex;
	align-items: center;
}
.scroe-history {
	margin-top: 16px;
	a {
		color: #1890ff;
		cursor: pointer;
	}
	a:hover {
		color: #1d8ef8;
	}
}
.history-content {
	background: #fbfbfb;
	border-radius: 2px;
	border: 1px solid #eee;
	margin-top: 10px;
	padding: 14px 16px 0;
	header {
		margin-bottom: 19px;
		font-size: 14px;
		font-weight: 500;
		color: #000;
		line-height: 20px;
	}
	.history {
		margin-bottom: 16px;
		.time-box {
			display: flex;
			align-items: center;
			margin-bottom: 7px;
		}
		.detail-box {
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			padding: 14px 16px;
			background: #fff;
			box-shadow: 0 0 3px 0 rgb(0 0 0 / 6%);
			border-radius: 2px;
			img {
				width: 22px;
				height: 22px;
				margin-right: 8px;
			}
		}
	}
}
.dialog-title {
	width: 100%;
	color: #262626;
	font-size: 17px;
	text-align: center;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 1px;
}
</style>
